import React, { memo, useEffect, useState } from 'react'


// 自定义hook
function useLogLife (cName) {
  useEffect(() => {
    console.log(`${cName} component 创建`);
    return () => console.log(`${cName}component 销毁`)
  }, [])
}

const Home = memo(() => {
  useLogLife('home')
  return <h1>Home page</h1>
})
const About = memo(() => {
  useLogLife('about')
  return <h1>About page</h1>
})


const App = memo(() => {

  const [isShow, setIsShow] = useState(true)
  // useEffect(() => {
  //   console.log('app component 创建');
  //   return () => console.log('app component 销毁')
  // },[])
  // 减少重复性内容，提取到自定义hook中
  useLogLife('app')

  return (
    <div>
      <h1>app component</h1>
      <button onClick={e=>setIsShow(!isShow)}>切换</button>
      {
        isShow ? <Home />:''
      }
      <About />
    </div>
  )
})

export default App